<template>
  <!-- 我的数据资产 -->
  <view class="container">
    <view class="top-view">
      <u-search class="search" :showAction="true" placeholder="搜索" :animation="true" bg-color="black"
                borderColor="darkgray" style="width: 500upx;"></u-search>
      <uni-icons type="folder-add" size="40" color="#d3d3d3" @click="navTo('/pages/asset/addFile')"></uni-icons>
    </view>

    <view class="data-log-box" style="padding: 0">
      <view v-for="(item, index) in OrderList.rows" :key="index" class="log-item">
        <view class="log-status">
          <text v-if="item.createUserId === item.userId">购买</text>
          <text v-else>卖出</text>
        </view>

        <view style="background-color: #2f3045; padding: 10px;">
          <view class="log-box1">
            <view class="log-image">
              <image :src="item.productInfo.iconUrl" mode="aspectFill"></image>
            </view>
            <view class="log-info">
              <view class="log-info1">
                <view>{{ item.productInfo.name|| '-'  }} </view>
                <view>{{ item.amount|| '-' }}</view>
              </view>
              <view class="log-info1">
                <view>{{ item.productInfo.brief || '-' }} </view>
                <view> ×{{ item.productInfo.num || '-' }}</view>
              </view>
            </view>
          </view>
          <view class="log-meta">
            <view class="log-info1">
              <view>时间</view>
              <view>{{ item.orderTime || '-' }} </view>
            </view>
            <view class="log-info1" v-if="item.createUserId === item.userId">
              <view>来自</view>
              <view>{{ item.productInfo.ownUserId || '-' }}</view>
            </view>
            <view v-else class="log-info1" >
              <view>去往</view>
              <view>{{ item.productUserId || '-' }}</view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { mapState } from 'vuex';
import { getOrderList } from '@/api/trade';
import tag from "@/components/min/tag.vue";

export default {
  computed: {
    ...mapState(['spaceData','userInfo'])
  },
  data() {
    return {
      OrderList: {
        rows: [], // 初始化为空数组
        status: 0,
        text: '全部',
        loadingType: 'more'
      },
      params: {
        pageNum: 1,
        pageSize: 10,
        //ownUserId:this.userInfo.userId,
      }
    }
  },
  components: {
    tag
  },
  onLoad() {
    this.loadData();
  },
  // 上拉加载
  onReachBottom() {
    this.params.pageNum++;
    this.loadData(); // 获取的数据列表
  },
  // 下拉刷新
  onPullDownRefresh() {
    this.params.pageNum = 1;
    this.loadData(); // 获取的数据列表
    uni.showToast({
      title: '刷新成功',
      icon: 'success',
      duration: 2000
    });
    uni.stopPullDownRefresh(); // 停止刷新
  },
  methods: {
    navTo(url) {
      uni.navigateTo({ url });
    },
    async loadData() {
      try {
        let res = await getOrderList(this.params);
        console.log(res);
        if (res.code !== 200) {
          throw new Error(res.msg || '请求出错');
        }
        this.OrderList.rows = this.OrderList.rows.concat(res.rows); // 更新订单列表
      } catch (error) {
        console.error('请求出错：', error);
        // 处理请求出错的情况，例如显示错误提示或者进行其他操作
        uni.showToast({
          title: error.message || '请求出错，请稍后重试',
          icon: 'none',
          duration: 2000
        });
      }
    }
  }
}
</script>

<style lang="scss">
.container {

  padding: 20upx;

  margin-top: 20upx;

  .top-view {
    display: flex;
  }

}
.data-log-box {
  padding: 20upx;
}
.log-box1{
  padding: 10px;
  color: #d3d3d3;
  display: flex;
}
.log-item {
  align-items: center;
  margin: 15px 0;
}
.log-status{
  background-color: #242a42;
  font-size: 18px;
  color: #f6d790;
  padding: 5px 10px;
}
.log-image {
  width: 110upx;
  height: 110upx;
  margin-right: 20upx;
}

.log-image image {
  width: 100%;
  height: 100%;
}

.log-info {
  flex: 1;
}
.log-info1 {
  display: flex;
  justify-content: space-between;
  padding: 5px 0;
  font-size: 14px;
}
.log-meta {
  color: #d3d3d3;
  padding: 0 10px;
  font-size: 14px;
}





</style>